<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { RouterView, useRouter } from 'vue-router'
import { NLayout, NLayoutHeader, NLayoutSider, NLayoutContent, NWatermark } from 'naive-ui'
import type { MenuOption } from 'naive-ui'

import { useDictStore } from '@/stores/dictStore'
import { useMenuStore } from '@/stores/menuStore'
import { useUserStore } from '@/stores/userStore'
import { useConfigStore } from '@/stores/configStore'
import { useOrgStore } from '@/stores/orgStore'

import Header from './header.vue'
import Menu from './menu.vue'

const router = useRouter()
const dictStore = useDictStore()
const orgStore = useOrgStore()
const menuStore = useMenuStore()
const userStore = useUserStore()
const configStore = useConfigStore()

const collapsed = ref(false)

onMounted(() => {
    menuStore.initMenuList()
    dictStore.refresh()
    orgStore.loadOrgInfo()
    userStore.loadAccountInfo()
    userStore.loadUserInfo()
})

function menuUpdate(key: string, item: MenuOption | any) {
    if (item.label) {
        if (item.data.loadType === "0") {
            router.push({ name: key })
        }
        if (item.data.loadType === "1") {
            router.push({ path: "/iframe/" + key })
        }
    }
}
</script>

<template>
    <n-layout v-if="configStore.getPanelMode() === '0'" position="absolute">
        <n-layout-header inverted>
            <Header v-model:collapsed="collapsed" />
        </n-layout-header>
        <n-layout position="absolute" has-sider style="top: 48px;">
            <n-layout-sider :native-scrollbar="false" :width="208" collapse-mode="width" :collapsed="collapsed"
                style="height: 100%;box-shadow: 0 0px 4px 0 rgb(3 27 78 / 6%);">
                <Menu :collapsed="collapsed" :menuOptions="menuStore.menuTree()" :menu-Update="menuUpdate" />
            </n-layout-sider>
            <n-layout-content style="background-color: var(--flame-home-content-background-color);">
                <router-view />
            </n-layout-content>
        </n-layout>
    </n-layout>

    <n-layout v-if="configStore.getPanelMode() === '1'" position="absolute" has-sider>
        <n-layout-sider inverted :native-scrollbar="false" :width="208" collapse-mode="width" :collapsed="collapsed"
            style="height: 100%;box-shadow: 0 0px 4px 0 rgb(3 27 78 / 6%);">
            <Menu :collapsed="collapsed" :menuOptions="menuStore.menuTree()" :menu-Update="menuUpdate" />
        </n-layout-sider>
        <n-layout position="absolute" :style="{ left: collapsed ? '48px' : '208px', transition: 'left .3s' }">
            <n-layout-header style="height:48px">
                <Header v-model:collapsed="collapsed" />
            </n-layout-header>
            <div style="position:absolute;top:48px;bottom:0;left:0;right:0">
                <n-layout-content style="height:100%;background-color: var(--flame-home-content-background-color);">
                    <router-view />
                </n-layout-content>
            </div>
        </n-layout>
    </n-layout>
    <n-watermark :content="userStore.userName" cross fullscreen :font-size="16" :line-height="16" :width="500" :height="309"
        :rotate="-15" :x-offset="0" :y-offset="64" :font-weight="100" />
</template>

<style scoped>
.home-bottom {
    top: 48px;
}
</style>